 <template>
  <div>
    <div class="info-wrapper">
      <div class="nums text-orange">
          <span class="unit">￥</span>26,357,000
      </div>
      <p class="meta-title text-dark">逾期总金额</p>
    </div>
    <div class="flex justify-between align-center padding-lr-lg padding-tb-sm bg-gray">
      <div class="text-sm">逾期商家(共28家)</div>
      <span><van-icon name="arrow-down" /></span>
    </div>
    <div class="shops-container">
      <van-list
        v-model="loading"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
        :offset="100"
      >
        <ul class="shop-list">
          <li class="item solid-bottom" v-for="item in 10" :key="item">
            <div class="shop-meta">
              <div class="shop-icon"></div>
            </div>
            <div class="shop-info">
              <div class="num text-black text-bold">JIT生活家</div>
              <div class="tiptext text-dark">逾期21次</div>
            </div>
            <div class="shop-num">
              <div class="text-orange text-bold">
                <span class="text-sm">￥</span><span class="num">67,500</span>
              </div>
              <div class="text-ccc text-xs text-right">逾期金额</div>
            </div>
          </li>
        </ul>
      </van-list>  
    </div>
  </div>  
</template>
<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  mounted () {
    
  },
  methods: {
    onLoad () {
      console.log('1111')
    }
  }
};
</script>
<style lang="less" scoped>
.info-wrapper{
  padding: 34px 40px 30px 40px;
  .nums{
    text-align: center;
    font-size:68px;
    font-weight: bold;
    font-family:Poppins;
    .unit{
      font-size:36px;
    }
  }
  .meta-title{
    text-align: center;
    font-size:28px;
  }
}
.shop-list{
  padding: 0 15px;
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
  }
  .shop-meta{
    .shop-icon{
      display: inline-block;
      margin: 0 16px;
      width:96px;
      height:96px;
      background:rgba(255,216,193,1);
    }
  }
  .shop-info{
    flex: auto;
    .num{
      font-size:30px;
    }
    .tiptext{
      font-size:26px;
    }
  }
  .shop-num{
    padding-right: 20px;
    .num{
      font-size: 38px;
    }
  }
}
</style>


